<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>

    <style>
        #div1 {
            border: blueviolet solid 1px;
            width: 200px;
            height: 200px;
        }

        #div2 {
            border: blueviolet solid 1px;
            width: 100px;
            height: 100px;
        }

        #div3 {
            border: darkred solid 1px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
    <div id="div2">div2</div>
</div>

<a id="del">删除子节点</a>
<a id="add">添加子节点</a>

</body>

<script>
    let eleADel = document.getElementById("del");
    let eleAAdd = document.getElementById("add");

    let eleDiv = document.getElementById("div1");
    let eleDiv2 = document.getElementById("div2");

    // 移除Node
    eleADel.onclick = function () {
        eleDiv.removeChild(eleDiv2);
    }

    // 添加Node
    eleAAdd.onclick = function () {
        let eleNewDiv = document.createElement("div")
        eleNewDiv.setAttribute("id", "div3")
        eleNewDiv.innerText = "div3";
        eleDiv.appendChild(eleNewDiv)
    }

    let pNode =  eleDiv2.parentNode;
    alert(pNode)

    let pEle = eleDiv2.parentElement
    alert(pEle)

</script>

</html>